<template>
    <el-collapse accordion >
        <el-collapse-item v-for="(item, index) in CaseTables" :key="index" :name="String(index + 1)" >
            <template #title>
                <el-row style="width:100%;text-align: left;font-size: 16px;" :gutter="20">
                    <el-col :span="5">日期：{{ item.date }}</el-col>
                    <el-col :span="7" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                        <el-tooltip content="昆山市人昆山市人民检察院民检察院" placement="top">
                            <span>单位:昆山市人民检察院</span>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="5">接待人:张毅{{ item.name }}</el-col>
                    <el-col :span="4">答复形式:</el-col>
                    <el-col :span="3">级别:L0</el-col>
                </el-row>
            </template>
            <div>
                <el-form :model="form" class="mt-3" label-width="80px"  label-position="right" ref="formRef" v-loading="loading">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="时间">
                                <el-input v-model="form.name" :readonly="readonly" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="单位">
                                <el-input v-model="form.Tel" :readonly="readonly" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="接待人">
                                <el-input v-model="form.idcard"  :readonly="readonly" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="答复形式">
                                <el-input v-model="form.danwei" :readonly="readonly" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="级别">
                                <el-input v-model="form.address" :readonly="readonly"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                        
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="反映事项">
                                <el-input
                                    v-model="form.ReflectionMatters"
                                    :rows="6"
                                    type="textarea"
                                    :autosize="false"
                                    resize="none"
                                    placeholder=""
                                    :readonly="readonly"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="处理情况">
                                <el-input
                                    v-model="form.HandlingSituation"
                                    :rows="6"
                                    type="textarea"
                                    :autosize="false"
                                    resize="none"
                                    placeholder=""
                                    :readonly="readonly"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>
<script setup>
    import {getCurrentInstance} from "vue";
const {proxy} = getCurrentInstance()

const loading = ref(false)
const readonly = ref(true)

const form = ref({
    name:'哈哈哈',
    radio:'no'
})
const CaseTables = ref([
    {
      date:'2020-12-12',
      name: "1",
      depname:'啊啊后阿达说的啊啊后阿达说的阿萨德啊啊后阿达说的阿萨德啊啊后阿达说的阿萨德啊啊后阿达说的阿萨德阿萨德'
    },
    {
      date:'2024-11-01',
      name: "2",
    },
  ]);
</script>